<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./echarts.min.js"></script>
    <div id="chart" style="width: 600px; height: 500px"></div>

    <script>
      // 初始化 ECharts 实例
      const myChart = echarts.init(document.getElementById("chart"));

      // 真实后端数据
      const annularList = [
        { value: 3000, name: "水冷空调" },
        { value: 4600, name: "VRV空调" },
        { value: 2400, name: "其他空调" },
      ];

      // 颜色
      const colorList = {
        水冷空调: ["#4292FF", "#7DBAFF"],
        VRV空调: ["#207e8e", "#5ddeE6"],
        其他空调: ["#FFB400", "#FFC900"],
      };

      // 组装数据
      const newAnnularList = annularList.map((item) => {
        return {
          ...item,
          itemStyle: {
            color: new echarts.graphic.RadialGradient(0, 0, 1, [
              {
                offset: 0,
                color: colorList[item.name][0],
              },
              {
                offset: 1,
                color: colorList[item.name][1],
              },
            ]),
          },
        };
      });

      // 配置项
      const option = {
        title: {
          text: "设备类型分布",
          left: "center", // 对齐方式居中
          top: "45%", // 距离顶部
          textStyle: {
            // 文字配置
            color: "#000", // 文字颜色
            fontSize: 15, // 字号
            align: "center", // 对齐方式
          },
        },
        tooltip: {
          show: true,
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          top: "bottom",
        },
        series: [
          {
            name: "设备类型分布",
            type: "pie",
            radius: ["40%", "60%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: true,
              position: "outside",
              formatter: (params) => {
                if (params.name == "水冷空调") {
                  return "{a| " + params.value + "}\n{a| " + params.percent + "%}";
                }
                else if (params.name == "VRV空调") {
                  return "{b| " + params.value + "}\n{b| " + params.percent + "%}";
                }
                 else {
                  return "{c|" + params.value + "}\n{c| " + params.percent + "%}";
                }
              },
              rich: {
                a: {
                  color: "#4292FF",
                  align: "left",
                  padding: 4,
                },
                b: {
                  color: "#5DDEE6",
                  align: "left",
                  padding: 4,
                },
                c: {
                  color: "#FFC900",
                  align: "left",
                  padding: 4,
                },
          
            
              
              },
            },
            labelLine: {
              show: true,
              length: 20,
              length2: 30,
            },
            data: newAnnularList,
          },
        ],
      };

      // 使用配置项展示图表
      myChart.setOption(option);
    </script>
  </body>
</html>
